<template>
    <view class="jk-page-container bg">
        <jkSearchBar
            :search-val.sync="searchParams.productNameOrCode"
            :searchLeftItemName="searchParams.batchCode"
            :searchRightItemName="'更多筛选'"
            :disabled="true"
            search-right-item-no-data-name="更多筛选"
            placeholder="品种编号或名称"
            search-left-item-no-data-name="批号"
            @click-input="onSearchIpt"
            @search="onSearchBtn"
            @search-left-item="moreSearchState = true"
            @search-right-item="moreSearchState = true"
        ></jkSearchBar>
        <view class="column-list-container" style="box-sizing: border-box;">
            <view v-for="(item) in tableData" :key="item.id" class="column-list-item">
                <view>
                    <view class="column-list-item-default flex-between-center">
                        <view class="column-list-item-title">{{ item.productName || '' }}</view>
                        <view class="column-list-item-sub-title color1">
                            <!--<u-tag size="default" :type="transferState(item.packageState).type" :text="transferState(item.packageState).name"></u-tag>-->
                        </view>
                    </view>
                    <view class="column-list-item-default column-list-item-sub-title">批号：{{ item.batchCode || '' }}</view>
                    <view class="column-list-item-default column-list-item-sub-title">分类：{{ item.categoryName || '' }}</view>
                    <view class="column-list-item-default column-list-item-sub-title">通知单：{{ item.code || '' }}</view>
                    <view style="background: #f8f8f9;padding: 4rpx 12rpx;border-radius: 12rpx;">
                        <u-row>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">纸管：{{ item.productOrderBatchItem && item.productOrderBatchItem.paperTubeList ? item.productOrderBatchItem.paperTubeList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">扎线：{{ item.productOrderBatchItem && item.productOrderBatchItem.bundleList ? item.productOrderBatchItem.bundleList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                        </u-row>
                        <u-row>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">外袋：{{ item.productOrderBatchItem && item.productOrderBatchItem.outerBagList ? item.productOrderBatchItem.outerBagList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">内袋：{{ item.productOrderBatchItem && item.productOrderBatchItem.innerBagList ? item.productOrderBatchItem.innerBagList.map(x => x.name).join() : '无' }}</view>
                            </u-col>
                        </u-row>
                        <u-row>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">净重：{{ item.productOrderBatchItem && item.productOrderBatchItem.suttle }}</view>
                            </u-col>
                            <u-col :span="6">
                                <view class="column-list-item-default column-list-item-sub-title" style="font-size: 24rpx;margin: 4rpx 0;">备注：{{ item.productOrderBatchItem && item.productOrderBatchItem.remark ? item.productOrderBatchItem.remark : '无' }}</view>
                            </u-col>
                        </u-row>
                    </view>
                </view>
                <view style="font-weight: 300;margin-top: 20rpx;">
                    <u-button @click="onJump(item.code)" :disabled="selectedIds.includes(String(item.id))" type="primary" size="normal">选择</u-button>
                </view>
            </view>
            <jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
        </view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <more-search
            :popup-state="moreSearchState"
            @close="(e) => moreSearchState = e"
            @confirm="onConfirmOfMoreSearch"
        ></more-search>
    </view>
</template>

<script>
import {
    productionPrdNoticeNewPage,
} from "../../../../api";
import {
    isLastPage,
    pageConfig,
    showLoading
} from "../../../../utils/jk-utils";
import loadingMore from '../../../../mixins/loading-more';
import jkNoMore from "../../../../jk-components/jk-no-more";
import jkSearchBar from "../../../../jk-components/jk-search-bar";
import jkPopupOption from "../../../../jk-components/jk-popup-option";
import moreSearch from './components/moreSearch';
export default {
    mixins: [loadingMore],
    components: {
        moreSearch,
        jkPopupOption,
        jkNoMore,
        jkSearchBar,
    },
    data() {
        return {
            apiConfig: {
                list: productionPrdNoticeNewPage
            },
            moreSearchState: false,
            searchParams: {
                totalCount: pageConfig.totalCount,
                workshopId: '',
                workshopName: '',
                customerName: '',

                pageNo: 1,
                pageSize: pageConfig.pageSize,
                productNameOrCode: '',
                batchCode: '',
                code: '',
                productOrderCode: '',
                belongDate: '',
                auditState: '',
                selectItem: true,
                selectUnfinishedOrder: true,
                ifTest: false
            },
            selectWorkshopPopupOptionState: false,
            tableData: [],
            workshopList: [],
            selectedIds: []
        }
    },
    onLoad(e) {
        this.selectedIds = e.ids ? e.ids.split(',') : [];
    },
    onShow() {
        if (!this.searchParams.workshopId) {
            // this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
            // this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
        }
        this.workshopList = getApp().globalData.defaultWorkshop.list;
        this.getDependentData();
    },
    methods: {
        onSearchIpt() {
            this.moreSearchState = true;
        },
        onConfirmOfMoreSearch(item) {
            this.searchParams = {
                ...this.searchParams,
                ...item
            };
            this.moreSearchState = false;
            this.$set(this.searchParams, 'pageNo', 1);
            this.getListRequest();
        },
        onToSelectCustomer() {
            wx.navigateTo({
                url: '/pages/production/packagePrd/outWarehouse/searchCustomer'
            });
        },
        onConfirmOfSelectWorkshop(e, item) {
            this.$set(this.searchParams, 'pageNo', 1);
            this.$set(this.searchParams, 'workshopId', item.id);
            this.$set(this.searchParams, 'workshopName', item.name);
            this.selectWorkshopPopupOptionState = false;
            this.getListRequest();
        },
        onClearOfSearchIpt() {
            this.$set(this.searchParams, 'code', '');
            this.onSearchBtn();
        },
        onJump(code) {
            let pages = getCurrentPages(); // 当前页的数据
            let prevPage = pages[pages.length - 2]; // 上一页的数据
            prevPage.$vm.getDataDetailRequest(code); // 调用上一页 定义的方法
            wx.navigateBack({
                delta: 1
            })
        },
        onSearchBtn(e) {
            this.tableData = [];
            this.$set(this.searchParams, 'code', e);
            this.getListRequest();
        },
        async getDependentData() {
            showLoading(true);
            this.searchParams.pageNo = 1;
            await this.getListRequest();
            showLoading(false);
        },
        getListRequest() {
            // if (this.searchParams.workshopId) {
            showLoading(true);
            this.searchParams.pageNo = 1;
            let params = JSON.parse(JSON.stringify(this.searchParams));
            // delete params.customerName;
            delete params.workshopName;
            delete params.workshopCode;
            delete params.totalCount;
            return this.apiConfig.list(params).then(res => {
                showLoading(false);
                if (res.data.status === 200) {
                    this.$set(this.searchParams, 'totalCount', res.data.count);
                    this.tableData = res.data.res;
                    this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
                }
            })
            // }
        }
    },
    onReachBottom() {
        this.getMore();
    }
}
</script>

<style lang="scss" scoped>
</style>
